<template>
  <div class="mvPage" v-if="state.pageShow">
    <div class="mvItem" v-for="mv in state.mvList" :key="mv.id">
      <div class="coverImg">
        <div class="countBox">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <span>{{ mv.playCount }}</span>
        </div>
        <img :src="mv.picUrl" alt="">
      </div>
      <div class="mvMessage">
        <div class="mvName">{{ mv.name }}</div>
        <div class="mvCreator">
          <span v-for="(creator, index) in mv.artists" :key="index">{{ creator.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqMv } from '@/api/requests/mv.js'
import { onMounted, reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      mvList: [],
      pageShow: false,
    })
    onMounted(async () => {
      let result = await reqMv();
      console.log(result);
      state.mvList = result.data.result
      if (state.mvList == []) {
        state.pageShow = false
      } else {
        state.pageShow = true
      }
    })

    return { state }
  }
}
</script>

<style lang="less" scoped>
.mvPage {
  width: 100%;
  text-align: center;
  padding-bottom: 50px;

  .mvItem {
    width: 90%;
    height: 250px;
    margin: 10px auto;
    overflow: hidden;
    border-radius: 10px;
    background-color: rgb(194, 243, 225);
    padding-top: 8px;

    &:first-child {
      margin-top: 0;
    }

    .coverImg {
      width: 95%;
      margin: 0 auto;
      position: relative;

      img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 2px 2px 5px 2px rgb(147, 182, 169);
      }

      .countBox {
        display: flex;
        align-items: center;
        position: absolute;
        top: 5px;
        right: 10px;

        span {
          margin-left: 5px;
          color: white;
        }
      }

    }

    .mvMessage {
      padding-left: 10px;

      .mvName {
        text-align: start;
        font-size: 20px;
        margin-top: 5px;
      }

      .mvCreator {
        text-align: start;
        font-size: 14px;
        font-family: 'Courier New', Courier, monospace;
        color: gray;
      }
    }
  }
}
</style>